<template>
    <el-dialog v-model="dialogVisible" class="tao-dialog" title="活动推广" width="25%" align-center>
        <div class="tao-dialog-body">
            <div class="tao-dialog-body-item">
                <div class="custom-label">推广商品</div>
                <div class="good-info">
                    <el-image class="custom-logo" :src="currentInfo.cover"></el-image>
                    <div class="good-info-name">{{ currentInfo.product_name }}</div>
                </div>
            </div>
            <div class="tao-dialog-body-item">
                <div class="custom-label">推广链接</div>
                <div class="copy-list">
                    <div
                        v-for="(item, index) in copyList"
                        :key="index"
                        class="copy-item"
                        :class="{ 'copy-item-disabled': isDisabled(item[0]) }"
                        @click="copyHandler(item[0])">
                        <div class="copy-item-box">
                            <el-image class="custom-img" :src="item[1]"></el-image>
                        </div>
                        <span>{{ item[0] }}</span>
                    </div>
                </div>
            </div>
        </div>
    </el-dialog>
</template>
<script setup>
import { reactive, ref } from 'vue';
import useClipboard from 'vue-clipboard3';
import { ElMessage } from 'element-plus';
import { getTaoPassWord } from '@/api/highMaterial/sourceMaterials';

const { toClipboard } = useClipboard(); // 复制方法

const copyList = reactive([
    ['获取淘口令', 'https://img.static-keyid.cn/toolspace/scrm/2023/08/169165465372808ky71wedvsbrbya.png'],
    ['获取淘暗号', 'https://img.static-keyid.cn/toolspace/scrm/2023/08/1691653816316lpkmng39qeq767nr.png']
]); // 渲染复制dom
const isDisabled = val => {
    // 是否禁用
    return ['获取淘暗号'].includes(val);
};

const currentInfo = reactive({}); // 商品id
const dialogVisible = ref(false); // 弹窗显示

/**
 * @description: 打开弹窗
 * @param {*} row 传入的信息
 * @return {*}
 */
const handleOpen = row => {
    // 控制弹窗
    Object.assign(currentInfo, row);
    dialogVisible.value = true;
};

/**
 * @description: 复制
 * @param {*} val 复制label
 * @return {*}
 */
const copyHandler = async val => {
    if (isDisabled(val)) {
        ElMessage.info('即将开放');
        return;
    }
    try {
        // 获取淘口令接口
        const data = await getTaoPassWord({ product_id: [currentInfo.id] });
        await toClipboard(data?.tao_pass_words?.map(item => item.tao_pass_word).join('\r\n'));
        ElMessage.success('已复制到剪切板');
    } catch (e) {
        if (typeof e !== 'string') {
            ElMessage.error('获取链接失败');
        }
    }
};

defineExpose({
    handleOpen
});
</script>
<style lang="scss">
.tao-dialog {
    min-width: 400px;
    max-width: 400px;

    &-body {
        &-item {
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .custom-label {
                font-size: 14px;
                font-family: PingFangSC-Regular, 'PingFang SC';
                font-weight: 400;
                color: #33302d;
                line-height: 20px;
                margin-bottom: 16px;
            }

            .custom-logo {
                width: 48px;
                max-width: 48px;
                min-width: 48px;
                height: 48px;
                border-radius: 4px;
            }

            .good-info {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                margin-bottom: 24px;

                &-name {
                    margin-left: 12px;
                    flex: 1;
                    white-space: break-spaces;
                    word-break: break-all;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, 'PingFang SC';
                    font-weight: 400;
                    color: #33302d;
                    line-height: 20px;
                }
            }

            .copy-list {
                display: flex;
            }

            .copy-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;

                &:not(:first-of-type) {
                    margin-left: 64px;
                }

                span {
                    font-family: PingFangSC-Regular, 'PingFang SC';
                    font-weight: 400;
                    color: #333;
                    line-height: 20px;
                }

                &-disabled {
                    cursor: not-allowed;

                    span {
                        color: #999;
                    }

                    .copy-item-box {
                        border: 1px solid #ededed;
                    }
                }

                &-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 68px;
                    height: 68px;
                    background: #fff;
                    border-radius: 6px;
                    border: 1px solid #ff6b00;
                    margin-bottom: 12px;

                    .custom-img {
                        width: 40px;
                    }
                }
            }
        }
    }

    .el-dialog__body {
        padding: 24px;
    }

    .el-dialog__header {
        height: 56px;
        display: flex;
        align-items: center;
        padding: 0 24px;

        & > .el-dialog__headerbtn {
            width: 56px;
            height: 56px;

            & > .el-icon {
                font-size: 20px;
            }
        }
    }

    .el-dialog__title {
        font-size: 16px;
        font-family: PingFangSC-Medium, 'PingFang SC';
        font-weight: 500;
        color: #33302d;
    }
}
</style>
